<template>
<!-- 	<view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image>
		 -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image>
		<hx-navbar :title="info.item.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<!-- <view class="noticeTip" @click="toNotice">相关公告</view> -->
		<view class="container">
			<view class="collect_img_box">
				<view class="imgCont">
					<image :src="info.item.image"  mode="aspectFill" class="collect_image"></image>
					<!-- <iframe :src="info.url" v-if="info.type == 1" class="collect_image" frameborder="0"></iframe> -->
				</view>
				<image src="/static/index/taizi.png" mode="widthFix" class="taizi_img"></image>
			</view>
			<view class="goods_name_box">
				<view class="price_box">
					<view class="price">
						<text style="font-size: 30rpx">￥</text>{{info.price|fp}}
					</view>
					<view class="goods_name">
						<view class="goods_name_info">
							<view class="cell-item-cb">
								<view class="goods_name_text">
									{{info.item.name}}
								</view>
							</view>
							<view class="nums_box">
								<view class="data">
									<view class="label">限量</view>
									<view class="num">{{info.item.quantity}}份</view>
								</view>
								<!-- <view class="data">
									<view class="label" :class="{'big': info.goods_cat_id == 2}">{{info.goods_cat_id == 2?'未开启':'流通'}}</view>
									<view class="num">{{info.goods_cat_id == 2?info.not_open:info.brief}}份</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="details_box">
				<view class="authorWrap">
					<view class="item">
						<view class="intro">
							<image class="title" src="/static/detail/author_title1.png" mode="scaleToFill"></image>
							<view class="user">
								<image class="avatar" src="/static/logo.jpg" mode="scaleToFill"></image>
								<text>冰clod文创</text>
							</view>
						</view>
						<image class="icon" src="/static/detail/detail_icon.png" mode="scaleToFill"></image>
					</view>
					<view class="item">
						<view class="intro">
							<image class="title" src="/static/detail/author_title2.png" mode="scaleToFill"></image>
							<view class="user">
								<image class="avatar" :src="item.author.avatar" mode="aspectFill"></image>
								<text>{{item.author.nickname}}</text>
							</view>
						</view>
						<image class="icon" src="/static/detail/detail_icon.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="block_info">
					<view class="block_item">
						<view class="block_label">商品编号</view>
						<!-- <view class="block_icon">
							<text>查看流转记录</text>
							<image src="/static/user/arrow_right.png" mode="scaleToFill"></image>
						</view> -->
						<view class="block_value">#{{info.tokenId}}</view>
					</view>
				</view>
				<view class="block_info">
					<view class="block_item">
						<view class="block_label">所属专辑</view>
						<view class="block_value">{{category.name}}</view>
					</view>
					<view class="block_item">
						<view class="block_label">链上地址</view>
						<view class="block_value" @tap="copy(info.chainData)">
							<view class="text">{{info.chainData || '更新中'}}</view>
							<image class="icon" src="/static/detail/hash_copy.png" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="block_item">
						<view class="block_label">认证标识</view>
						<view class="block_value">{{info.tokenId}}</view>
					</view>
					<view class="block_item">
						<view class="block_label">拥有者</view>
						<view class="block_value">{{info.owner.nickname}}</view>
					</view>
				</view>
				<view class="manghe_show" v-if="info.goods_cat_id == 2">
					<view class="title">
						<image class="icon" src="/static/detail/title.png" mode="widthFix"></image>
						<view class="text">您可能抽到以下作品中的1个</view>
					</view>
					<view class="item_show" v-for="item,id in info.mang_list" :key="id">
						<image :src="item.image" mode="aspectFill" class="item_show_img"></image>
						<view class="item_info">
							<view class="goods_name">
								{{item.name}}
							</view>
							<view class="rate">
								<text class="m-r-30">概率：{{item.win_chance}}%</text> 总量：{{item.num}}份
							</view>
						</view>
						<image class="level_img" :src="'/static/index/level_'+item.grade+'.png'" mode="heightFix"></image>
					</view>
				</view>
				<view class="cont-box">
					<image class="article_tilte" src="/static/detail/title1.png" mode="widthFix"></image>
					<view class="content_box">
						<jshopContent :content="info.item.content" v-if="info.item.content"></jshopContent>
					</view>
				</view>
				<view class="cont-box">
					<image class="article_tilte" src="/static/detail/title2.png" mode="widthFix"></image>
					<rich-text class="xuzhi_content" :nodes="payText" ></rich-text>
				</view>
			</view>
			<image v-if="ktheme == 'purple'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot.png" mode="widthFix"></image>
			<image v-if="ktheme == 'black'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot-black.png" mode="widthFix"></image>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="foot">
			<view @tap="open()" class="btn"
				v-if="info.item.type == 2">开启盲盒</view>
			<view class="btn" @tap="go_sale()"
				v-if=" info.status == 0">立即寄售</view>
			<view class="btn" @tap="cancel()" v-else-if="info.status == 1">取消寄售</view>
		</view>
		<paypass ref="passbox" @confirm="set_done"></paypass>
		<uni-popup ref="rewards" type="center" :isMaskClick="false">
			<view class="rewards_box">
				<view class="rewards_title">恭喜获得新的数字科技商品</view>
				<image src="/static/user/rewards_light.png" mode="widthFix" class="rewards_light"></image>
				<image :src="openItem.item.image" mode="aspectFill" class="reward_img"></image>
				<view class="reward_name">{{openItem.item.name}}</view>
			</view>
			<view class="confirm_btn2" @tap="confirm">确定</view>
		</uni-popup>
	</view>
</template>

<script>
	import jshopContent from '@/components/jshop/jshop-content.vue'; //视频和文本解析组件
	import paypass from '@/components/pay_pass/pay_pass.vue';
	
	export default {
		components: {
			jshopContent,
			paypass
		},
		data() {
			return {
				id: 0,
				info: {
					mang_list: []
				},
				item: {},
				input_price: 0,
				user_phone: '',
				give_user: {},
				openItem: {
					item: {}
				},
				//type1转售 2转赠
				type: 1,
				payText: '<p>数字科技商品为虚拟数字商品,而非实物,仅限实名认证为年满18周岁的中国大陆用户购买。数字科技商品的版权由发行方或原创者拥有，除另行取得版权拥有者书面同意外，用户不得将数字科技商品用于任何商业用途。本商品一经售出,不支持退换。本商品源文件不支持本地下载。请勿对数字科技商品进行炒作、场外交易、欺诈,或以任何其他非法方式进行使用。<br></p>',
				
			}
		},
		computed: {
			bili: function() {
				return this.$store.state.config.resale_fee
			},
			shouxufei: function() {
				let bili = this.$store.state.config.resale_fee;
				return this.input_price - (this.input_price * bili / 100).toFixed(2)
			},
			logoImage() {
				return this.$store.state.config.shop_logo;
			},
		},

		onLoad(options) {
			this.id = options.id;


			if (!this.id) {
				this.$common.errorToShow('商品失效')
				uni.navigateBack()
				return;
			}
			// let userToken = this.$db.get("userToken");
			// let data = {
			// 	sn: this.id
			// }
			// if (userToken) {
			// 	data.token = userToken;
			// }
			// this.$api.getCollectionDetails(data, res => {
			// 	if (res.status) {
			// 		this.info = res.data;
			// 	}
			// })

		},
		onShow() {
			if (this.id) {

				let userToken = this.$db.get("userToken");
				let data = {
					sn: this.id
				}
				if (userToken) {
					data.token = userToken;
				}
				this.$api.getCollectionDetails(this.id, res => {
					if (res.status) {
						this.info = res.data;
						this.$api.getGoodsDetails(res.data.iid, res=>{
							this.item = res.data
							this.author = this.item.author
							this.category = this.item.category
						})
					}
				})
			}
		},
		onPullDownRefresh() {
			this.$api.getGoodsDetails({
				id: this.id
			}, res => {
				if (res.status) {
					this.info = res.data;
				}
			})
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onNavigationBarButtonTap() {
			// this.$common.errorToShow('敬请期待')
			// return;
			this.go_give()
		},

		methods: {
			show_preview: function(img) {
				uni.previewImage({
					urls: [img]
				})
			},


			copy: function(hash) {
				if (hash == "等待上链中") {
					this.$common.errorToShow("等待上链中");
					return;
				}
				if (!hash) {
					this.$common.errorToShow("更新中");
					return;
				}
				uni.setClipboardData({
					data: hash,
					success: res => {
						this.$common.errorToShow('已复制剪贴板')
					}
				})
			},

			set_done: function(pass) {
				if (this.type == 1) {
					this.sale(pass)
				}
				if (this.type == 2) {
					this.give(pass)
				}
			},

			give_before: function() {
				this.type = 2
				if (this.give_user.true_name) {
					uni.showModal({
						content: '确定要给' + this.give_user.true_name + '转赠吗？',
						success: (r) => {
							if (r.confirm) {
								this.$api.checkSecondPassword({}, res => {
									if(res.status){
										let data = res.data
										if (data.secondPassword) {
											this.$refs.passbox.open();
											this.$refs.give.close()
										} else {
											this.$common.errorToShow('请设置交易密码', () => {
												uni.navigateTo({
													url: '/pages/user/settings/pay_pass/pay_pass'
												})
											});
										}
									}else{
										this.$common.errorToShow('网络异常');
									}
								})
							}
						}
					});

				} else {
					this.$common.errorToShow('请输入有效用户')
				}
			},

			go_give: function() {
				if (!this.info.is_rurnadd) {
					this.$common.errorToShow('该商品不可转赠')
					return;
				}
				// this.$refs.give.open(0);
				uni.navigateTo({
					url: 'collection_give?id=' + this.id
				})
			},
			go_sale: function() {
				// this.$refs.give.open(0);
				uni.navigateTo({
					url: 'collection_sale?id=' + this.id
				})
			},


			open: function() {
				uni.showModal({
					content: '确定开启这一个？',
					success: (r) => {
						if (r.confirm) {
							let data = {
								nftBoxId: this.info.nftId
							}
							this.$api.openBox(data, res => {
								if (res.status) {
									this.openItem = res.data;
									this.$refs.rewards.open()
								} else {
									this.$common.errorToShow(res.message)
								}
							})
						}
					}
				});
			},
			confirm: function() {
				this.openItem = {};
				this.$refs.rewards.close();
				uni.navigateBack()
			},

			change_hanlder: function(e) {

			},

			give: function(pass) {
				if (this.give_user.true_name) {

					let data = {
						sn: this.info.sn,
						mobile: this.user_phone,
						pay_password: pass
					}
					this.$api.giveItem(data, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								uni.redirectTo({
									url: '/pages/user/give_record/give_record'
								})
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})

				} else {
					this.$common.errorToShow('请输入有效用户')
				}
			},
			checkinput: function(e) {
				let mobile = e.detail.value;
				if (mobile.length == 11) {
					this.see_user()
				}
			},


			clean: function() {
				this.give_user = {};
				this.user_phone = ''
			},

			see_user: function() {
				let data = {
					mobile: this.user_phone
				}
				this.$api.getUserInfo(data, res => {
					if (res.status) {
						this.give_user = res.data;
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			sale_before: function() {
				this.type = 1
				uni.showModal({
					content: '确认转售吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.checkSecondPassword({}, res => {
								if(res.status){
									let data = res.data
									if (data.secondPassword) {
										this.$refs.passbox.open();
									} else {
										this.$common.errorToShow('请设置交易密码', () => {
											uni.navigateTo({
												url: '/pages/user/settings/pay_pass/pay_pass'
											})
										});
									}
								}else{
									this.$common.errorToShow('网络异常');
								}
							})
						}
					}
				});
			},


			sale: function(pass) {

				let data = {
					sn: this.id,
					give_price: this.input_price,
					pay_password: pass
				}
				this.$api.sale(data, res => {
					if (res.status) {
						this.$common.successToShow(res.msg, () => {
							uni.navigateBack({

							})
						});
						this.close()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})

			},
			cancel: function() {
				uni.showModal({
					content: '确定取消订单吗？',
					success: (r) => {
						if (r.confirm) {
							let data = {
								nftId: this.id
							}
							this.$api.saleCancel(data, res => {
								if (res.status) {
									this.$common.successToShow("操作成功")
									uni.navigateBack({

									})
								} else {
									this.$common.errorToShow(res.message)
								}
							})
						}
					}
				});
			},

			createOrder: function() {

				this.$refs.popup.open();
				this.input_price = this.info.give_price;
			},
			close: function() {

				this.$refs.popup.close()
				this.input_price = 0
			},
			close2: function() {

				this.$refs.give.close()
				this.input_price = 0
			},


			no_sale: function() {
				this.$common.errorToShow('未开售')
			},

			toNotice() {
				uni.$emit('notice', 1);
				// this.$common.navigateTo('/pages/article/index?id=' + this.info.notice_id + '&id_type=2');
				uni.switchTab({
					url: '/pages/notice/notice'
				});
			}
		},


	}
</script>

<style lang="scss">
	@import "@/pages/index/detail.scss";
</style>

<style lang="scss" scoped>
	.data {
		.label.big {
			width: 90rpx;
		}
	}
	.foot {
		height: 160rpx;
		.btn {
			margin-right: 12rpx;
		}
		& > view:last-child {
			margin-right: 0;
		}
	}
	.see_sale_record {
		width: 167rpx;
		height: 36rpx;
		background: #F5F4F9;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #666666;
		font-weight: normal;
	}
</style>